<!-- src/views/dashboard/Dashboard.vue -->
<template>
  <main class="main-content dashboard-layout">
    <!-- 内容左侧 -->
    <div class="content-left">
      <!-- KPI 统计 -->
      <section class="kpi-grid">
        <div v-for="kpi in kpiData" :key="kpi.label" class="card kpi-card">
          <div class="icon-placeholder">{{ kpi.icon }}</div>
          <div class="kpi-content">
            <div class="value">{{ kpi.value }}</div>
            <div class="label">{{ kpi.label }}</div>
          </div>
        </div>
      </section>

      <!-- 图表统计 -->
      <section class="chart-grid">
        <div class="card">
          <div class="card-header"><h2 class="card-title">设备数量占比</h2></div>
          <div class="card-content">
            <div ref="pieChartRef" class="chart-container"></div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><h2 class="card-title">设备状态统计</h2></div>
          <div class="card-content">
            <div ref="donutChartRef" class="chart-container"></div>
          </div>
        </div>
      </section>
      
      <!-- 趋势统计 -->
      <section class="card">
          <div class="card-header">
            <h2 class="card-title">告警数量趋势统计</h2>
            <div class="card-actions">
                <button 
                  v-for="period in trendPeriods" 
                  :key="period"
                  :class="{ active: activeTrendPeriod === period }"
                  @click="activeTrendPeriod = period"
                >
                  {{ period }}
                </button>
            </div>
        </div>
        <div class="card-content">
          <div ref="barChartRef" class="chart-container"></div>
        </div>
      </section>
    </div>

    <!-- 内容右侧 -->
    <div class="content-right">
      <div class="card">
        <div class="card-header"><h2 class="card-title">常用功能</h2></div>
        <div class="card-content common-functions-grid">
          <div v-for="func in commonFunctions" :key="func.name" class="function-item">
            <div class="icon-placeholder">{{ func.icon }}</div>
            <span>{{ func.name }}</span>
          </div>
        </div>
      </div>
      <div class="card data-detail-card">
        <div class="card-header"><h2 class="card-title">XXX数据</h2></div>
        <div class="card-content">
          <div ref="gaugeChartRef" class="chart-container" style="height: 180px"></div>
          <div class="air-quality-info">
            <h3>空气质量:<span>优</span></h3>
            <p>主要污染物: <strong>PM2.5</strong></p>
            <p>全国排名: <strong>111/337</strong></p>
          </div>
        </div>
      </div>
        <div class="card small-info-card">
            <div class="card-header"><h2 class="card-title">平均水质</h2></div>
            <div class="card-content">I类</div>
        </div>
        <div class="card small-info-card">
            <div class="card-header"><h2 class="card-title">主要污染物</h2></div>
            <div class="card-content">TN、NH3-N</div>
        </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import { useEcharts } from '../../composables/useEcharts';

// --- 响应式数据 ---
const kpiData = ref([
  { icon: 'icon', value: 30, label: '产品数量' },
  { icon: 'icon', value: 230, label: '设备总数' },
  { icon: 'icon', value: 213, label: '在线设备' },
  { icon: 'icon', value: 10, label: '今日告警' },
]);

const commonFunctions = ref([
  { icon: 'icon', name: '数据大屏' }, { icon: 'icon', name: '所有设备' },
  { icon: 'icon', name: '新增设备' }, { icon: 'icon', name: '新增产品' },
  { icon: 'icon', name: '视频监控' }, { icon: 'icon', name: '视频告警' },
  { icon: 'icon', name: '质控数据' }, { icon: 'icon', name: '指标统计' },
]);

const trendPeriods = ['今日', '近七日', '近30日', '近一年'];
const activeTrendPeriod = ref('今日');


// --- ECharts 图表配置和初始化 ---

// 1. 饼图
const { chartRef: pieChartRef } = useEcharts({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'right', top: 'center' },
  series: [{
      name: '设备占比', type: 'pie', radius: '80%', center: ['40%', '50%'],
      data: [ { value: 80, name: '直连设备' }, { value: 60, name: '网关设备' }, { value: 90, name: '网关子设备' } ],
      emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
      label: { show: true, position: 'inside', formatter: '{d}%', color: '#fff' }
  }],
  color: ['#5470c6', '#91cc75', '#fac858']
});

// 2. 环形图
const { chartRef: donutChartRef } = useEcharts({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  legend: { top: '5%', left: 'center' },
  series: [{
      name: '设备状态', type: 'pie', radius: ['55%', '75%'], avoidLabelOverlap: false,
      itemStyle: { borderRadius: 5, borderColor: '#fff', borderWidth: 2 },
      label: {
          show: true, position: 'center', formatter: '{a|在线(92%)}\n{b|213个}',
          rich: { a: { fontSize: 16, color: '#333', lineHeight: 26 }, b: { fontSize: 14, color: '#8c8c8c' } }
      },
      emphasis: { label: { show: true } },
      labelLine: { show: false },
      data: [ { value: 213, name: '在线(92%)' }, { value: 17, name: '掉线(8%)' } ]
  }],
  color: ['#1890ff', '#f5222d']
});

// 3. 柱状图
const { chartRef: barChartRef } = useEcharts({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: [{ type: 'category', data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'], axisTick: { alignWithLabel: true } }],
  yAxis: [{ type: 'value' }],
  series: [{ name: '告警数量', type: 'bar', barWidth: '60%', data: [70, 52, 75, 78, 72, 75, 76] }],
  color: ['#5470c6']
});

// 4. 仪表盘
const { chartRef: gaugeChartRef } = useEcharts({
  series: [{
      type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 300, splitNumber: 6, radius: '100%',
      axisLine: { lineStyle: { width: 20, color: [ [0.3, '#91cc75'], [0.5, '#fac858'], [0.7, '#ee6666'], [1, '#740505'] ] } },
      pointer: { icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', length: '12%', width: 15, offsetCenter: [0, '-50%'], itemStyle: { color: 'auto' } },
      axisTick: { length: 12, lineStyle: { color: 'auto', width: 2 } },
      splitLine: { length: 20, lineStyle: { color: 'auto', width: 5 } },
      axisLabel: { color: '#464646', fontSize: 12, distance: -50, formatter: (v) => (v % 50 === 0 ? v : '') },
      title: { show: false },
      detail: { fontSize: 30, offsetCenter: [0, '-10%'], valueAnimation: true, formatter: '{value}\nAQI', color: 'auto' },
      data: [ { value: 70 } ]
  }]
});

</script>

<style scoped>
@import '../../assets/css/dashboard.css';

/* 确保主内容区是flex布局 */
.dashboard-layout {
  display: flex;
  gap: 24px;
  flex-direction: row; /* 默认是 column，这里要覆盖为 row */
}

/* 覆盖 .main-content 的默认宽度，使其可以被 .dashboard-layout 的 flex 子项正确分配 */
.main-content.dashboard-layout {
    width: 100%;
}


.chart-container {
  height: 280px; /* 统一图表高度 */
}

.card-actions button {
  padding: 4px 12px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
}
.card-actions button.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}
</style>